<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>注册</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/gloab.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script src="/static/libs/jquery/jquery-3.6.0.min.js"></script>
<script src="js/register.js"></script>
<style type="text/css">
	 .item-ifo select{
		 height: 36px;
	 }
	 .item-ifo select option{
	 		 height: 36px;
	 }
</style>
</head>
<body class="bgf4">
<div class="login-box f-mt10 f-pb50">
	<div class="main bgf">    
    	<div class="reg-box-pan display-inline">  
        	<div class="step">        	
                <ul>
                    <li class="col-xs-3 on">
                        <span class="num"><em class="f-r5"></em><i>1</i></span>                	
                        <span class="line_bg lbg-r"></span>
                        <p class="lbg-txt">填写基本信息</p>
                    </li>
                    <li class="col-xs-3">
                        <span class="num"><em class="f-r5"></em><i>2</i></span>
                        <span class="line_bg lbg-l"></span>
                        <span class="line_bg lbg-r"></span>
                        <p class="lbg-txt">填写教育信息</p>
                    </li>
					<li class="col-xs-3">
                        <span class="num"><em class="f-r5"></em><i>3</i></span>
                        <span class="line_bg lbg-l"></span>
                        <span class="line_bg lbg-r"></span>
                        <p class="lbg-txt">填写教学信息</p>
                    </li>
                    <li class="col-xs-3">
                        <span class="num"><em class="f-r5"></em><i>4</i></span>
                        <span class="line_bg lbg-l"></span>
                        <p class="lbg-txt">资料提交成功</p>
                    </li>
                </ul>
            </div>
        	<div class="reg-box" id="verifyCheck" style="margin-top:20px;">
            	<div class="part1">                	
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>昵称：</span>    
                        <div class="f-fl item-ifo">
                            <input type="text" maxlength="20" value="张珊" class="txt03 f-r3 required" tabindex="1" data-valid="isNonEmpty||between:2-20" data-error="昵称不能为空||用户名长度2-20位"/>
							<span class="ie8 icon-close close hide"></span>
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus"><span>输入名称2-20位</span></label>
                            <label class="focus valid"></label>
                        </div>
                    </div>
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl"><b class="ftx04">*</b>民族：</span>    
					    <div class="f-fl item-ifo">
					        <input type="text" maxlength="20" value="汉族" class="txt03 f-r3 required" tabindex="2" data-valid="isNonEmpty" data-error="民族不能为空"/>
							<span class="ie8 icon-close close hide"></span>
					        <label class="icon-sucessfill blank hide"></label>
					        <label class="focus"><span>输入民族</span></label>
					        <label class="focus valid"></label>
					    </div>
					</div>
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl"><b class="ftx04">*</b>性别：</span>    
					    <div class="f-fl item-ifo">
							<select class=" txt03 f-r3 required"  tabindex="3" data-valid="isNonEmpty" data-error="性别必选">
							  <option value="0"></option>
							  <option value="1">男</option>
							  <option value="2">女</option>
							 </select>
							<span class="ie8 icon-close close hide"></span>
					        <label class="icon-sucessfill blank hide"></label>
					        <label class="focus"><span>请选择性别</span></label>
					        <label class="focus valid"></label>
					    </div>
					</div>
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl"><b class="ftx04">*</b>手机号：</span>    
					    <div class="f-fl item-ifo">
					        <input type="text" value="13437654522" class="txt03 f-r3 required" keycodes="tel" tabindex="4" data-valid="isNonEmpty||isPhone" data-error="手机号码不能为空||手机号码格式不正确" maxlength="11" id="phone" /> 
					        <span class="ie8 icon-close close hide"></span>                           
					        <label class="icon-sucessfill blank hide"></label>
					        <label class="focus">请填写11位有效的手机号码</label>
					        <label class="focus valid"></label>
					    </div>
					</div>
					<div class="item col-xs-12">
										 <span class="intelligent-label f-fl"><b class="ftx04">*</b>英语水平：</span>    
										 <div class="f-fl item-ifo">
											<select class=" txt03 f-r3 required"  tabindex="12" data-valid="isNonEmpty" data-error="英语水平必选">
											  <option value=""></option>
											  <option value="0">一般</option>
											  <option value="1">流利</option>
											  <option value="2">其他</option>
											 </select>
											<span class="ie8 icon-close close hide"></span>
											 <label class="icon-sucessfill blank hide"></label>
											 <label class="focus"><span>请选择英语水平</span></label>
											 <label class="focus valid"></label>
										 </div>
					 </div>
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl"><b class="ftx04">*</b>兴趣爱好：</span>    
					    <div class="f-fl item-ifo">
					        <input type="text" value="看电影,看书,玩游戏" maxlength="20" class="txt03 f-r3 required" tabindex="6" data-valid="isNonEmpty" data-error="兴趣爱好不能为空"/>
							<span class="ie8 icon-close close hide"></span>
					        <label class="icon-sucessfill blank hide"></label>
					        <label class="focus"><span>输入兴趣爱好有多个以“逗号”隔开</span></label>
					        <label class="focus valid"></label>
					    </div>
					</div>
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl"><b class="ftx04">*</b>头像路径：</span>    
					    <div class="f-fl">
					        <input type="text"class="txt03 f-r3 required" tabindex="7" data-valid="isNonEmpty" data-error="请上传头像"/>
							<input type="file" id="picClick" onchange="imgBlook()" style="display: none">
							<button type="button" class="btn btn-sm btn-w-m btn-danger" onclick="picClick()">点击上传</button>
							<label class="focus valid"></label>
					    </div>
					</div>
					<div class="item col-xs-12"style="height:140px; display: none;" id="imgBike">
					   <span class="intelligent-label f-fl">头像预览：</span>    
					   <div class="f-fl item-ifo">
					   	<img id="showImage" style="width: 200px;height: 117px" src='./images/profile.jpg' />
					   </div>
					</div>
					<div class="item col-xs-12">
                        <span class="intelligent-label f-fl">&nbsp;</span>    
                        <div class="f-fl item-ifo">
                           <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part1">下一步</a>                         
                        </div>
                    </div> 
                </div>
				
				
                <div class="part2" style="display:none">
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl"><b class="ftx04">*</b>毕业学校：</span>    
					    <div class="f-fl item-ifo">
					        <input type="text" maxlength="20" value="起点学教育" class="txt03 f-r3 required" tabindex="7" data-valid="isNonEmpty" data-error="毕业学校不能为空"/>
							<span class="ie8 icon-close close hide"></span>
					        <label class="icon-sucessfill blank hide"></label>
					        <label class="focus"><span>输入最后的毕业学校</span></label>
					        <label class="focus valid"></label>
					    </div>
					</div>
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl"><b class="ftx04">*</b>专业：</span>    
					    <div class="f-fl item-ifo">
					        <input type="text" maxlength="20" value="计算机科技与技术" class="txt03 f-r3 required" tabindex="8" data-valid="isNonEmpty" data-error="专业不能为空"/>
							<span class="ie8 icon-close close hide"></span>
					        <label class="icon-sucessfill blank hide"></label>
					        <label class="focus"><span>输入专业</span></label>
					        <label class="focus valid"></label>
					    </div>
					</div>
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl"><b class="ftx04">*</b>职称：</span>    
					    <div class="f-fl item-ifo">
					        <input type="text" value="Java工程师" maxlength="20" class="txt03 f-r3 required" tabindex="5" data-valid="isNonEmpty" data-error="职称不能为空"/>
							<span class="ie8 icon-close close hide"></span>
					        <label class="icon-sucessfill blank hide"></label>
					        <label class="focus"><span>输入职称</span></label>
					        <label class="focus valid"></label>
					    </div>
					</div>
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl"><b class="ftx04">*</b>教龄：</span>    
					    <div class="f-fl item-ifo">
					        <input type="number" value="0"  class="txt03 f-r3 required" tabindex="9" data-valid="isNonEmpty" data-error="教龄不能为空"/>
							<span class="ie8 icon-close close hide"></span>
					        <label class="icon-sucessfill blank hide"></label>
					        <label class="focus"><span>输入教龄</span></label>
					        <label class="focus valid"></label>
					    </div>
					</div>
					<div class="item col-xs-12">
					       <span class="intelligent-label f-fl"><b class="ftx04">*</b>教学特点：</span>    
					       <div class="f-fl item-ifo">
					           <input type="text"  value="幽默搞笑"  class="txt03 f-r3 required" tabindex="13" data-valid="isNonEmpty" data-error="教学特点不能为空"/>    
					           <span class="ie8 icon-close close hide"></span>                        
					           <label class="icon-sucessfill blank hide"></label>
					           <label class="focus">请填写教学特点</label>
					           <label class="focus valid"></label>
					       </div>
					   </div>
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl"><b class="ftx04">*</b>荣誉称号：</span>    
					    <div class="f-fl item-ifo">
					        <input type="text"  class="txt03 f-r3 required" tabindex="10" data-valid="isNonEmpty" data-error="荣誉称号不能为空"/>
					        <span class="ie8 icon-close close hide"></span>
					        <label class="icon-sucessfill blank hide"></label>
							<label class="focus"><span>曾经获取过荣誉称号，如果没有请填写“无”</span></label>
							<label class="focus valid"></label>
					    </div>
					</div>
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl"><b class="ftx04">*</b>技能证书：</span>    
					    <div class="f-fl item-ifo">
					        <input type="text"  class="txt03 f-r3 required" tabindex="11" data-valid="isNonEmpty" data-error="技能证书不能为空"/>
							<span class="ie8 icon-close close hide"></span>
							<label class="icon-sucessfill blank hide"></label>
					        <label class="focus"><span>曾经获取过技能证书，如果没有请填写“无”</span></label>
							<label class="focus valid"></label>
					    </div>
					</div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl">&nbsp;</span>    
                        <div class="f-fl item-ifo">
                           <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part2">下一步</a>                         
                        </div>
                    </div> 
                </div>
                <div class="part3" style="display:none">


				<div class="item col-xs-12">
				       <span class="intelligent-label f-fl">课程设计思路：</span>    
				       <div class="f-fl item-ifo">
				           <input type="text" value="按心情" class="txt03 f-r3" tabindex="14"/>    
				           <label class="focus">请填写课程设计思路，非必填</label>
				       </div>
				   </div>	
				   <div class="item col-xs-12">
				          <span class="intelligent-label f-fl">课程计划：</span>    
				          <div class="f-fl item-ifo">
				              <input type="text"  value="没有计划就是好计划" class="txt03 f-r3 " tabindex="15"/>    
				              <label class="focus">请填写课程计划，非必填</label>
				          </div>
				      </div>
					<div class="item col-xs-12">
					    <span class="intelligent-label f-fl">上传样课：</span>    
					    <div class="f-fl">
					        <input type="text"class="txt03 f-r3" tabindex="16" />
							<input type="file" id="demoClick" style="display: none">
							<button type="button" class="btn btn-sm btn-w-m btn-danger" onclick="demoClick()">点击上传</button>
					    </div>
					</div>  
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl">&nbsp;</span>    
                        <div class="f-fl item-ifo">
                           <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part3">提交</a>                         
                        </div>
                    </div>
                </div>  
                <div class="part4 text-center" style="display:none">
                	<h3>您的资料已经提交成功，请耐心等待平台审核</h3>
					<br/>
					<h3>平台审核完后会有短信通知到您！</h3>
                    <p class="c-666 f-mt30 f-mb50">页面将在 <strong id="times" class="f-size18">10</strong> 秒钟后，回到 <a href="/" class="c-blue">主页</a></p>
                </div>          
            </div>
        </div>
    </div>
</div>
<div class="m-sPopBg" style="z-index:998;"></div>
<script>
	function picClick(){
		$("#picClick").click();
	}
	function demoClick(){
		$("#demoClick").click();
	}
	function imgBlook(){
		$("#imgBike").show();
	}
$(function(){	
	//第一页的确定按钮
	$("#btn_part1").click(function(){						
		if(!verifyCheck._click()) return;
		$(".part1").hide();
		$(".part2").show();
		$(".step li").eq(1).addClass("on");
	});
	//第二页的确定按钮
	$("#btn_part2").click(function(){			
		if(!verifyCheck._click()) return;
		$(".part2").hide();
		$(".part3").show();	
		$(".step li").eq(2).addClass("on");
	});	
	//第三页的确定按钮
	$("#btn_part3").click(function(){			
		if(!verifyCheck._click()) return;
		$(".part3").hide();
		$(".part4").show();
		$(".step li").eq(3).addClass("on");
		countdown({
			maxTime:10,
			ing:function(c){
				$("#times").text(c);
			},
			after:function(){
				window.location.href="my.html";		
			}
		});		
	});	
});
</script>

</body>
</html>
